<template>
    <div class="my-mention-modal absolute bg-surface pa-2 z-[10] border rounded-[8px] w-[150px]" :style="{ top: top, left: left, width: width, height: height }">
        <!-- <input class="my-mention-input" v-model="searchVal" ref="inputRef" @keyup="inputKeyupHandler"> -->
        <div class="my-mention-list scroll_content_y h-[200px]">
            <div class="my-mention-item flex align-center pt-1 pb-1 cursor-pointer pl-1 pr-1 rounded-[4px]" v-ripple v-for="item in searchedList" :key="item.id"
                @click="insertMentionHandler(item.id, item.name)">
                <v-avatar color="surface-variant" size="24" class="mr-1">
                    <v-img alt="" src="https://cdn.vuetifyjs.com/images/john.jpg"></v-img>
                </v-avatar>
                <div class="text-text--primary">{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, inject } from "vue";
const emit = defineEmits(["insertMention", "hideMentionModal"])

// 编辑器ref
const editorRef = inject<any>("editorRef");

// 定位信息
const top = ref("");
const left = ref("");

const width = ref(150);
const height = ref(200);


const searchVal = ref("");
const list = ref([{ id: '1', name: 'JoJo' },
{ id: '2', name: 'Mi' },
{ id: '3', name: 'Jack' },
{ id: '4', name: 'Mike' },
{ id: '5', name: 'Li' },
{ id: '6', name: 'A' },
{ id: '7', name: 'B' },
{ id: '8', name: 'C' },
{ id: '9', name: 'D' },
{ id: '10', name: 'E' },
{ id: '11', name: 'F' },
{ id: '12', name: 'G' },
{ id: '13', name: 'H' },
{ id: '14', name: 'I' },
{ id: '15', name: 'J' },
{ id: '16', name: 'K' },
{ id: '17', name: 'L' },
{ id: '18', name: 'M' }]);

const inputRef = ref<any>(null);

// 根据 <input> value 筛选 list
const searchedList = computed(() => {
    const _searchVal = searchVal.value.trim().toLowerCase()
    return list.value.filter(item => {
        const name = item.name.toLowerCase()
        if (name.indexOf(_searchVal) >= 0) {
            return true
        }
        return false
    })
})

function inputKeyupHandler(event: any) {
    // esc - 隐藏 modal
    if (event.key === 'Escape') {
        emit('hideMentionModal')
    }

    // enter - 插入 mention node
    if (event.key === 'Enter') {
        // 插入第一个
        const firstOne = searchedList.value[0]
        if (firstOne) {
            const { id, name } = firstOne
            insertMentionHandler(id, name)
        }
    }
}

function insertMentionHandler(id: string | number, name: string) {
    emit('insertMention', id, name)
    emit('hideMentionModal') // 隐藏 modal
}

onMounted(() => {
    // 获取光标位置
    const domSelection = document.getSelection()
    const domRange = domSelection?.getRangeAt(0)
    if (domRange == null) return
    const rect = domRange.getBoundingClientRect()
    var editorRect = editorRef.value.box.getBoundingClientRect();
    // 定位 modal
    // 右侧超出 显示在左边
    if (rect.x + width.value > window.innerWidth) {
        left.value = `${rect.x - editorRect.x - width.value + 5}px`;
    } else {
        left.value = `${rect.x - editorRect.x + 5}px`;
    }
    if (rect.y + height.value > window.innerHeight) {
        top.value = `${rect.y - editorRect.y - height.value - 20}px`
    } else {
        top.value = `${rect.y - editorRect.y + 20}px`
    }

    // focus input
    // inputRef.value.focus()
})
</script>

<style>

</style>